<template>
    <div id="userquery">
        <mt-header fixed title="用户查询">
            <mt-button icon="back" @click.native="$router.go(-1);" slot="left">返回</mt-button>
        </mt-header>
        <div>
            <mt-field label="用户id" placeholder="用户id" :state="userId==''?'warning':'success'" v-model="userId"></mt-field>
        </div>
        <div style="margin:10px 5px">
            <mt-button type="primary" size="large" @click.native="search">查找</mt-button>
        </div>
        <div class="showResult lay" style="margin-top:0">
            <div class="showResultTitle"> 查询结果 </div>
            <div class="record" :key="index" v-for="(item,index) in group.arr">
                <div style="width:160px;"><span class="title"><i class="iconfont icon-shijian4"></i> 绑定时间</span><br/><span>{{(item.bindingTime)}}</span></div>
                <div style="flex:1"><span class="title"><i class="iconfont icon-huodong2"></i> 游戏昵称</span><br/><span>{{item.szNickName}}</span></div>
                <div style="flex:1"><span class="title"><i class="iconfont icon-zuanshi"></i> 钻石数量</span><br/><span>{{item.nCardCount}}</span></div>
            </div>
            <div v-if="group.arr.length==0" class="noresult">
                无符合条件的数据
            </div>
            <div v-if=" group.arr.length>0">
                <div style="margin:10px px">
                    <mt-button type="primary" size="large" @click.native="loadMoreRecord" v-if="group.nextPage < group.totalPages">加载更多</mt-button>
                    <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
                </div>
            </div>
        </div>
        <mt-popup v-model="popupVisible" :modal="false" position="top" pop-transition="popup-fade">
            <div class="popcontent">{{msg}}
            </div>
        </mt-popup>
    </div>
</template>
<script>
    import {
        MessageBox
    } from "mint-ui";
    export default {
        name: 'userquery',
        data() {
            return {
                userId: '',
                popupVisible: false,
                msg: "",
                group: {
                    arr: [],
                    nextPage: 0
                }
            }
        },
        methods: {
            getRecord(params) {
                let that = this;
                this.$http.get(`${this.baseUrl}/Main/GetData`, params).then(response => {
                    // console.log(response);
                    let data = response.data;
                    // that.popupVisible = true;
                    // that.msg = data.msg;
                    // let time = setTimeout(function() {
                    //     that.popupVisible = false;
                    //     that.msg = "";
                    //     clearTimeout(time);
                    // }, that.SETTIME);
                    if (data.code == 1) {
                        that.group.arr = that.group.arr.concat(data.body);
                        that.group.nextPage = that.group.nextPage + 1;
                        that.group.totalPages = Math.ceil(data.totalCount / that.PAGESIZE);
                        that.group.totalCount = data.totalCount;
                        // console.log(data);
                    } else {
                        MessageBox("提示", data.msg)
                    }
                })
            },
            search: function() {
                //  console.log(111);
                if (this.userId != "") {
                    if (!this.re.test(this.userId)) {
                        MessageBox("提示", '用户Id不是一个合法的数字');
                        return false;
                    }
                }
                this.group = {
                    arr: [],
                    nextPage: 0
                }
                let getInfoData = {
                    params: {
                        'functionname': "GetUserQuery",
                        body: JSON.stringify({
                            pageIndex: 0,
                            pageSize: this.PAGESIZE,
                            nPlayerId: parseInt(this.userId == "" ? 0 : this.userId)
                        })
                    }
                }
                this.getRecord(getInfoData);
            },
            loadMoreRecord() {
                let getInfoData = {
                    params: {
                        'functionname': "GetUserQuery",
                        body: JSON.stringify({
                            pageIndex: this.group.nextPage,
                            pageSize: this.PAGESIZE,
                            nPlayerId: parseInt(this.userId == "" ? 0 : this.userId)
                        })
                    }
                }
                this.getRecord(getInfoData);
            }
        },
        created() {
            this.search()
        },
        mounted() {
            document.body.style.background = "#fffbef";
        },
        destroyed() {}
    }
</script>

<style lang="scss" scoped>
    .record {
        display: flex;
        text-align: left;
        margin-bottom: 20px;
        background: #fff;
        div {
            overflow: hidden;
            padding: 10px 0;
            padding-left: 5px;
            font-size: 12px;
            line-height: 2;
            color: #9e9e9e;
            .title {
                color: #634747;
            }
        }
    }
</style>


